<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据集(dataset)</title>
  <!-- 
  在 JavaScript 中，dataset 是一个用于访问和操作 HTML 元素自定义数据属性的属性。自定义数据属性以 data- 前缀开头，允许开发者在 HTML 元素上存储额外的信息。
  1. 定义
  - dataset 是一个 DOMStringMap 对象，包含了所有以 data- 前缀开头的自定义属性。通过 dataset，可以轻松访问和修改这些属性。

  2. 使用方法
  - 访问自定义属性：可以通过 element.dataset 访问自定义属性，属性名去掉 data- 前缀后转为 camelCase 格式。
    const element = document.getElementById('myElement');
    console.log(element.dataset.customValue); // 获取 data-custom-value 属性的值
  - 设置自定义属性：可以直接通过 dataset 设置自定义属性的值。
    element.dataset.customValue = 'newValue'; // 设置 data-custom-value 属性的值

  3. 自定义属性的命名规则
  - 自定义属性必须以 data- 开头，后面的部分可以使用小写字母和连字符（-），在 JavaScript 中访问时，连字符会被转换为 camelCase 格式。

  4. 优势
  - 易于使用：dataset 提供了一种简单的方式来存取自定义数据，避免了使用 getAttribute 和 setAttribute 方法的繁琐。
  - 提高可读性：使用 dataset 可以使代码更具可读性，尤其是在处理多个自定义属性时。

  5. 注意事项
  - dataset 只返回字符串类型的值。如果需要存储其他类型的数据（如对象或数组），需要手动进行序列化（例如使用 JSON.stringify()）和反序列化（例如使用 JSON.parse()）。
  - dataset 只能用于自定义的 data- 属性，对于标准的 HTML 属性，仍需使用传统的方法进行访问。

  总结
 dataset 是一个强大的工具，可以方便地访问和操作 HTML 元素的自定义数据属性。通过使用 dataset，开发者可以在不影响文档结构的情况下，轻松地为元素添加额外的信息。
   -->
</head>
<body>

  <div 
    id="dataset-id"
    class="dataset-class" 
    data-dataset-age="18" 
    data-height="1.88"
  >
    数据集(dataset)
  </div>

  <script>
    const datasetElement = document.getElementById('dataset-id');
    // 1. 获取自定义属性
    console.log(datasetElement.dataset.datasetAge); // 18
    console.log(datasetElement.dataset.height); // 1.88

    // 2. 设置自定义属性
    datasetElement.dataset.datasetAge = 20; // 设置 data-dataset-age 属性的值
    datasetElement.dataset.height = 1.90; // 设置 data-height 属性的值
    console.log(datasetElement.dataset.datasetAge); // 20
    console.log(datasetElement.dataset.height); // 1.90

    // 3. 删除自定义属性
    delete datasetElement.dataset.datasetAge; // 删除 data-dataset-age 属性
    delete datasetElement.dataset.height; // 删除 data-height 属性
    console.log(datasetElement.dataset.datasetAge); // undefined
    console.log(datasetElement.dataset.height); // undefined
  </script>
  
</body>
</html>